<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
*{
*  tag: 'DIV',
*  attrs:{
*  id:'app'
* },
* children: [
*   {
*     tag: 'SPAN',
*     children: [
*       { tag: 'A', children: [] }
*     ]
*   },
*   {
*     tag: 'SPAN',
*    children: [
*      { tag: 'A', children: [] },
*      { tag: 'A', children: [] }
*    ]
* }
*  ]
*}
* 把上诉虚拟Dom转化成下方真实Dom
*<div id="app">
*  <span>
*    <a></a>
*  </span>
*  <span>
*    <a></a>
*    <a></a>
*  </span>
*</div>
*
-->
<script>
    function render(vnode) {
        const { tag, attrs = {}, children } = vnode;
        //? 创建dom
        let el = document.createElement(tag);
        //? 添加attr
        for (const key in attrs) {
            //? setAttribute  是 JavaScript 中的一个 DOM 方法，用于为 HTML 元素设置指定属性的值
            el.setAttribute(key, attrs[key]);
        }
        //? 处理children
        if (Array.isArray(children) && children.length > 0) {
            children.forEach(child => el.appendChild(render(child)));//? 子元素添加在父元素中
        }
        return el
    }
    const vnode = {
        tag: 'DIV',
        attrs: {
            id: 'app'
        },
        children: [
            {
                tag: 'SPAN',
                children: [
                    { tag: 'A', children: [] }
                ]
            },
            {
                tag: 'SPAN',
                children: [
                    { tag: 'A', children: [] },
                    { tag: 'A', children: [] }
                ]
            }
        ]
    }
    document.body.appendChild(render(vnode))
</script>
</body>
</html>
